Skip to content

improvement(emails): align transactional emails with the platform neutral design system#5309

Merged
waleedlatif1 merged 3 commits into
stagingfrom
email-templates-restyle
Jul 1, 2026
Merged

improvement(emails): align transactional emails with the platform neutral design system#5309
waleedlatif1 merged 3 commits into
stagingfrom
email-templates-restyle

Conversation

@waleedlatif1

@waleedlatif1 waleedlatif1 commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Re-skin all ~25 transactional email templates to match the platform + newsletter styling, driven entirely by the centralized tokens in _styles/base.ts
  • Colors now mirror globals.css light mode: #fefefe canvas, #1a1a1a text, #525252/#5c5c5c/#707070 greys, #dedede border — replacing the old lavender + green (#33C482) scheme. Accent defaults to neutral #1a1a1a but still honors a whitelabel primaryColor
  • Button matches the platform primary Chip: inverse #1a1a1a fill, white text, rounded-lg (8px), text-sm, normal weight. Links carry an underline (neutral color no longer signals a link)
  • Card uses 8px radius + hairline #dedede border; info/code boxes use a subtle token fill
  • Logo is the dark, text-only sim wordmark (green icon removed)
  • Footer: LinkedIn replaces Discord (reuses the existing linkedin-icon.png)
  • Every template routes through the centralized colors tokens — zero hardcoded hex; the payment-failed error box is tokenized to the platform error-surface values

Type of Change

  • Improvement (design-system alignment)

Testing

  • Rendered the reset-password template to a static preview to verify the new look (dark wordmark, neutral canvas, dark chip button, underlined links)
  • biome check clean; grep audit confirms no hardcoded hex remains in templates
  • Whitelabel path preserved: accent still resolves to a brand primaryColor when set

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@waleedlatif1
improvement(emails): align transactional emails with the platform neu…
b359446 
…tral design system

Re-skin all ~25 transactional email templates to match the platform/newsletter:
- Color tokens in _styles/base.ts now mirror globals.css light mode (#fefefe canvas,
  #1a1a1a text, #525252/#5c5c5c/#707070 greys, #dedede border) instead of the old
  lavender + green (#33C482) scheme; accent defaults to neutral #1a1a1a but still
  honors a whitelabel primaryColor.
- Primary CTA now matches the platform's primary Chip (inverse #1a1a1a fill, white
  text, rounded-lg, text-sm, normal weight); links carry an underline since the
  neutral color no longer signals a link.
- Card uses 8px radius + hairline border; info/code boxes use a subtle token fill.
- Logo is the dark, text-only 'sim' wordmark (green icon removed).
- Footer: LinkedIn replaces Discord.
- Every template routes through the centralized colors tokens — zero hardcoded hex
  (payment-failed error box tokenized to platform error surface values).
@vercel

vercel Bot commented Jul 1, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Jul 1, 2026 2:52am

Request Review

@cursor

cursor Bot commented Jul 1, 2026 •
edited
Loading

Copy link
Copy Markdown

PR Summary

Low Risk
Visual and branding-only changes to email templates; whitelabel accent behavior is unchanged and there is no auth, billing logic, or data-handling impact.

Overview
Transactional emails are re-skinned to match the platform’s neutral light-mode tokens instead of the old green (#33C482) and lavender palette.

_styles/base.ts drives the change: text, borders, canvas, and default accent map to platform greys (#1a1a1a, #525252, #dedede, #f8f8f8); whitelabel still uses primaryColor when set. CTAs follow the primary Chip (8px radius, 30px line height, normal weight); links use underline. The card gets a hairline border and 8px radius; info/code boxes use surfaceSubtle; payment errors use errorBg / errorBorder. Typography adds Season Sans in the stack.

EmailLayout loads Season Sans via @react-email Font, switches the default header to the dark text wordmark (smaller width, custom-logo sizing), and billing templates replace inline hex with shared colors tokens.

Footer swaps the Discord social link for LinkedIn (simdotai company URL and linkedin-icon.png).

Reviewed by Cursor Bugbot for commit ac80f3c. Configure here.

@greptile-apps

greptile-apps Bot commented Jul 1, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR refreshes the transactional email design to match the platform style. The main changes are:

  • Centralized neutral color, border, surface, button, and link tokens.
  • Updated billing email boxes to use shared email style tokens.
  • Swapped the footer social link from Discord to LinkedIn.
  • Added the dark wordmark and Season Sans font setup.
  • Adjusted logo sizing so custom whitelabel logos are not forced into the bundled wordmark width.

Confidence Score: 5/5

This looks safe to merge.

  • No blocking issues found in the changed code.

Important Files Changed

Filename Overview
apps/sim/components/emails/_styles/base.ts Updates shared transactional email tokens and base styles for the neutral platform design.
apps/sim/components/emails/components/email-layout.tsx Adds the shared email font setup and applies separate sizing behavior for bundled and custom logos.
apps/sim/components/emails/components/email-footer.tsx Replaces the Discord footer link and icon with the LinkedIn destination and asset.
apps/sim/components/emails/billing/credits-exhausted-email.tsx Moves the highlighted billing section background to the shared subtle surface token.
apps/sim/components/emails/billing/free-tier-upgrade-email.tsx Moves the Pro features section background to the shared subtle surface token.
apps/sim/components/emails/billing/payment-failed-email.tsx Moves the payment error box background and border to shared error surface tokens.

Reviews (2): Last reviewed commit: "improvement(emails): use Season Sans to ..." | Re-trigger Greptile

greptile-apps[bot]
greptile-apps Bot reviewed Jul 1, 2026
View reviewed changes
Comment thread apps/sim/components/emails/_styles/base.ts Outdated
Comment thread apps/sim/components/emails/components/email-layout.tsx
@waleedlatif1
fix(emails): keep card boundary robust + don't reshape custom logos
578cb5f 
- Canvas goes to #f8f8f8 (off Andres's newsletter) so the white card reads via
  contrast in clients that flatten inline borders, not the border alone (Greptile P2).
- Logo pins exact 70x34 only for the bundled wordmark; whitelabel brand.logoUrl now
  constrains by height with auto width so custom logos keep their aspect (Greptile P1).
@waleedlatif1
improvement(emails): use Season Sans to match the newsletter and plat…
ac80f3c 
…form

Register the Season Sans web font (the woff2 shipped with the newsletter, #5302)
via react-email's <Font> in the layout head, and lead the email font stack with
'Season Sans' (system stack still the fallback for clients that ignore @font-face).
@waleedlatif1

waleedlatif1 commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator Author

@greptile review

@waleedlatif1

waleedlatif1 commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator Author

@cursor review

cursor[bot]
cursor Bot reviewed Jul 1, 2026
View reviewed changes

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit ac80f3c. Configure here.

@waleedlatif1 waleedlatif1 merged commit 2c38e63 into staging Jul 1, 2026
12 checks passed
@waleedlatif1 waleedlatif1 deleted the email-templates-restyle branch July 1, 2026 02:58
@waleedlatif1 waleedlatif1 mentioned this pull request Jul 1, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments
@cursor cursor[bot] cursor[bot] left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@waleedlatif1